<template>
    <z-paging ref="paging" v-model="taskList" @query="queryList">
        <u-sticky>
            <view class="heqader_box"
                style="background-image: url('https://morgan.dingxians.cn/upload/20241118/673b094b26ae8.png');">
                <hedsty></hedsty>
            </view>
        </u-sticky>
        <view class="bot_box">
            <view class="dange_hjd_list_box" v-for="(item, index) in taskList" :key="index"
                @click="$router('/homePage/indexDetail?id=' + item.id + '&catId=' + item.cat_id + '&boxs=' + item.boxs)"
                style="background-image: url('https://morgan.dingxians.cn/static/avtivey/4.png');">
                <view class="left_box">
                    <image :src="item.image" mode="scaleToFill" />
                </view>
                <view class="cneter_box">
                    <view class="name_baox">【{{ item.boxs }}】 {{ item.name }}</view>
                    <view class="rentou_box">
                        <view class="libian_box" v-for="(items, indexs) in item.cy_data" :key="indexs">
                            <image :src="items.avatar" mode="scaleToFill" />
                        </view>
                        <view class="libian_box" v-for="(itemss, indexss) in (item.original_num - item.cy_total)"
                            :key="indexss">
                            <u-icon name="plus-circle" color="#fff" size="30"></u-icon>
                        </view>
                    </view>

                </view>
                <view class="anniu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/avtivey/5.png');">{{ item.price
                    }}/抽</view>
                <view class="dqls_box">{{ item.cy_total }}/{{ item.original_num }}</view>
            </view>
        </view>
        <view class="cebianniu_box1" @click="$refs.paging.reload()">
            <image src="https://morgan.dingxians.cn/static/yfs/shauxin.png" mode="scaleToFill" />
        </view>
        <view class="cebianniu_box2" @click="tiaozhuan">
            <image src="https://morgan.dingxians.cn/static/yfs/shangdai.png" mode="scaleToFill" />
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            taskList: []
        }
    },
    onLoad() {

    },
    onShow() {
		uni.hideLoading()
    },
    methods: {
        queryList(pageNo, pageSize) {
            let data = {
                tag: 1,
                page: pageNo,
                limit: pageSize
            }
            this.$Request.get(this.$api.index.challengeBox, data).then(res => {
                uni.hideLoading()
                if (res.code == 200) {
                    this.$refs.paging.complete(res.data.data.data)
                }
            })
        },
        tiaozhuan() {
				uni.switchTab({
					url: '/pages/bonus/index'
				})
			},
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 510rpx;
    background-size: 100% 100%;
    margin-bottom: 40rpx;
}

// .bot_box {
//     width: 690rpx;
//     margin: auto;

.dange_hjd_list_box {
    width: 690rpx;
    height: 220rpx;
    margin: auto;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 30rpx 35rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin-bottom: 40rpx;

    .left_box {
        width: 160rpx;
        height: 160rpx;
        background: rgba(23, 1, 3, 0.5);
        border-radius: 10rpx;
        border: 2px solid #FFEDD7;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 19rpx;

        image {
            width: 150rpx;
            height: 150rpx;
        }
    }

    .cneter_box {
        width: 440rpx;
        height: 160rpx;
        box-sizing: border-box;

        .name_baox {
            width: 100%;
            height: 50rpx;
            font-weight: bold;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 50rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rentou_box {
            width: 100%;
            height: 90rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .libian_box {
                width: 60rpx;
                height: 60rpx;
                margin-right: 8rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }

    }

    .anniu_box {
        width: 155rpx;
        background-size: 100% 100%;
        height: 44rpx;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 44rpx;
        position: absolute;
        bottom: 10rpx;
        right: 35rpx;
    }

    .dqls_box {
        height: 19rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
        line-height: 18rpx;
        position: absolute;
        top: 28rpx;
        right: 33rpx;
    }
}

// }
.cebianniu_box1 {
    width: 109rpx;
    height: 122rpx;
    position: fixed;
    right: 30rpx;
    top: 668rpx;
    z-index: 999;

    image {
        width: 100%;
        height: 100%;
    }
}

.cebianniu_box2 {
    width: 109rpx;
    height: 122rpx;
    position: fixed;
    right: 30rpx;
    top: 808rpx;
    z-index: 999;

    image {
        width: 100%;
        height: 100%;
    }
}
</style>